<template>
  <!-- <el-select v-model="value" :placeholder="props.placeholder" clearable filterable @change="change">
    <el-option v-for="item in logisticsOptions" :key="item.value" :label="item.label" :value="item.value" />
  </el-select> -->
  <el-select-v2
    v-model="value"
    :options="logisticsOptions"
    v-bind="$attrs"
    clearable
    filterable
    @change="change"
    :placeholder="props.placeholder"
  >
  </el-select-v2>
</template>
<script setup>
import useCommonStore from "@/store/modules/common";
const commonStore = useCommonStore();
const logisticsOptions = computed(() => {
  if (!commonStore.logisticsOptions) {
    commonStore.getLogisticsList();
  }
  return commonStore.logisticsOptions || [];
});
const props = defineProps({
  modelValue: [String, Number, Array],
  placeholder: {
    type: String,
    default: "请选择",
  },
});

const value = computed(() => {
  return props.modelValue || null;
});

const emit = defineEmits(["update:modelValue", "change"]);

const change = (val) => {
  const item = logisticsOptions.value.find((i) => i.value == val);
  emit("update:modelValue", val);
  emit("change", item?.label);
  if (item) {
    emit("changeItem", item);
  }
};
</script>
